<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous"
    />
    <title>Awesome JavaScript Projects</title>
    <style>
      main {
        width: 60%;
      }
      @media only screen and (max-width: 768px) {
        main {
          width: 80%;
        }
      }
    </style>
  </head>
  <body>
    <main class="mx-auto">
      <h1>Awesome JavaScript Projects</h1>
      <img src="scripts/assets/banner.png" width="100%" />
      <h2>Projects</h2>
      <ul>
        <% for( let project of projectList ) { %>
        <li>
          <a href="/awesome-javascript-projects/projects/<%= project.name -%>"
            ><%= project.name -%></a
          >
        </li>
        <% } %>
      </ul>
    </main>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
